<!DOCTYPE html>
<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>callmepieman.com styleguide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="public/kss.css">
  <link rel="stylesheet" href="dist/styles.css">
<link rel="stylesheet" href="src/docs/styleguide.css">

</head>
<body id="kss-node">
<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">callmepieman.com styleguide</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-base.html">
          <span class="kss-nav__ref">1</span
          ><span class="kss-nav__name">Base</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-components.html">
          <span class="kss-nav__ref">2</span
          ><span class="kss-nav__name">Components</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-dependencies.html">
          <span class="kss-nav__ref">3</span
          ><span class="kss-nav__name">Dependencies</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-regions.html">
          <span class="kss-nav__ref">4</span
          ><span class="kss-nav__name">Regions</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
<article role="main" class="kss-main">
  <div id="kssref-0" class="kss-section kss-section--depth-0 kss-overview kss-style">
     <h1 id="callmepieman-com-style-guide">callmepieman.com style guide</h1>
<h2 id="how-to-use">How to use</h2>
<p>The styleguide is located at <code>./docs/styleguide</code>.
Homepage is at <code>index.html</code> of that styleguide directory.</p>
<p>This document is generated with <a href="https://github.com/kss-node/kss-node/tree/2.x">kss</a>, using a custom template.</p>
<h2 id="architecture">Architecture</h2>
<p>The architecture is inspired by
[atomic-oobemitscss][<a href="http://www.sitepoint.com/atomic-oobemitscss/">http://www.sitepoint.com/atomic-oobemitscss/</a>].</p>
<h3 id="base-">Base/</h3>
<p>As the name suggest, base is the core.
Initialize variable and resets should be found in this directory.</p>
<p>Similar to <a href="http://patternlab.io/about.html#atoms">atoms</a>.</p>
<h3 id="components-">Components/</h3>
<p>Components are partials of the page.</p>
<p>Similar to <a href="http://patternlab.io/about.html#molecules">molecules</a></p>
<h3 id="dependencies-">Dependencies/</h3>
<p>Dependencies are theme and application specific styles.</p>
<h3 id="regions">Regions</h3>
<p>Regions are modules of the page.</p>
<p>Similar to <a href="http://patternlab.io/about.html#organisms">organisms</a></p>
<h2 id="external-libraries">External libraries</h2>
<ul>
<li><p><a href="https://necolas.github.io/normalize.css/">normalize</a></p>
</li>
<li><p><a href="http://getbootstrap.com/">bootstrap</a> (<em>to be removed</em>)</p>
</li>
<li><p><a href="http://glyphicons.com/">glyphicons</a> (<em>to be removed</em>)</p>
</li>
<li><p><a href="https://fortawesome.github.io/Font-Awesome/">font-awesome</a></p>
</li>
</ul>
<h2 id="contribuing">Contribuing</h2>
<h3 id="how-to">How to</h3>
<p>Styleguide is using the styleguide gulp task to compile, located at
<code>./tasks/styleguide.js</code>.</p>
<h3 id="tasks-styleguide">tasks/styleguide</h3>
<p>2 functions are used to compile styleguide:</p>
<ul>
<li><p><code>genCss(gulp, plugins)</code>:
Compile <code>docs/styleguide.scss</code> into <code>docs/styleguide.css</code>.</p>
<p><code>docs/styleguide.scss</code> is a set of helpers relative to the documentation 
generated.</p>
</li>
<li><p><code>genDoc()</code>:
Generate docs with <a href="https://github.com/kss-node/kss-node/tree/2.x">kss</a> (version 2.x).
Refer to <a href="https://github.com/kss-node/kss-node/tree/2.x">kss documentation</a> for more details.</p>
</li>
</ul>
<h3 id="template">template</h3>
<p>A custom template is used as theme.</p>
<p>The theme is located at <code>./src/docs/styleguide/template</code></p>
<h3 id="compiling-styleguide">Compiling styleguide</h3>
<p>To compile styleguide: <code>$ gulp styleguide</code></p>
<h3 id="conventions">Conventions</h3>
<ul>
<li>Add properties in alphabetical order</li>
<li>No more than 3 nested classes</li>
<li>4 spaces indenting</li>
</ul>

  </div>
</article>

<!-- SCRIPTS -->
<script src="public/kss.js"></script>
<script src="public/prettify.js"></script>
<script>
  prettyPrint();
</script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>



<!-- Automatically generated using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
